<template>
<!-- 网格布局，按照每行特定个元素进行排列，每行元素的数量为(24 / span) -->
  <el-row :gutter="gutter">
    <el-col
        v-for="(item, index) in items"
        :key="index"
        :span="span" :class="index == items.length - 1 ? 'last' : ''"
    >
      <slot name="item" :item="item"
            ></slot>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "GridLayout",
  props: {
    gutter: {
      type: Number,
      default: 0
    },
    span: {
      type: Number,
      default: 8
    },
    items: {
      type: Array,
      required: true
    }
  },
}
</script>

<style scoped>

:not(.last)::after {
  content: '';
  height: 1px;
  width: 100%;
  position: absolute;
  background-color: var(--color-border);
}
</style>